<script setup lang='ts'>
interface Props {
  num: number
}
defineOptions({ name: 'AppSportsBetSlipHeaderTotal' })
const props = defineProps<Props>()

const isNumUpdated = ref(false)
const oldNum = ref<undefined | number>(undefined)
let updateTimer: any = null

// 数字变化动画播放结束
function animationend() {
  oldNum.value = undefined
}

watch(() => props.num, (newVal: number, oldVal: number) => {
  clearTimeout(updateTimer)

  oldNum.value = oldVal
  isNumUpdated.value = true

  updateTimer = setTimeout(() => {
    isNumUpdated.value = false
    clearTimeout(updateTimer)
  }, 1600)
})
</script>

<template>
  <div>
    <div id="bet-slip-header-total" class="relative text-[14px] h-[22px] min-w-[22px] font-semibold">
      <!-- 旧数字 -->
      <div v-if="oldNum" class="num-wrap absolute" :class="{ 'ani-fadeOut': oldNum }" @animationend="animationend">
        <div class="num ">
          {{ oldNum }}
        </div>
      </div>

      <!-- 新数字 -->
      <div class="num-wrap" :class="{ 'is-update': isNumUpdated, 'ani-fadeIn': oldNum }">
        <div class="num" :class="{ 'is-update': isNumUpdated }">
          {{ num }}
        </div>
      </div>
    </div>
  </div>
</template>

<style lang='scss' scoped>
.num-wrap {
  &::before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    opacity: 0;
    position: absolute;
    border-radius: 11px;
    background: rgba(0, 0, 0, 0.3);
  }

  &.is-update {
    &::before {
      opacity: 1;
      animation: bt2548 600ms 1000ms;
      transition: all 600ms ease-in-out 1000ms;
      border-radius: 11px;
      background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
    }
  }

  .num {
    color: #24ee89;
    height: 22px;
    display: flex;
    padding: 0px 5px;
    min-width: 22px;
    background: rgb(0, 0, 0);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 10px 0px;
    box-sizing: border-box;
    align-items: center;
    line-height: 22px;
    white-space: nowrap;
    border-radius: 11px;
    justify-content: center;

    &.is-update {
      animation: bt2547 600ms 1000ms;
    }
  }
}

// 数字变化动画
.ani-fadeOut {
  animation: fade-out 600ms ease-in-out;
}

.ani-fadeIn {
  animation: fade-in 600ms ease-in-out;
}

@keyframes fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes bt2548 {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  5% {
    opacity: 1;
    transform: scale(1.116901757628817);
  }

  40% {
    opacity: 1;
    transform: scale(3.3549959100745377);
  }

  45% {
    opacity: 1;
    transform: scale(3.5054274675326322);
  }

  50% {
    opacity: 1;
    transform: scale(3.603793686377848);
  }

  55% {
    opacity: 1;
    transform: scale(3.659353388357259);
  }

  60% {
    opacity: 1;
    transform: scale(3.681931318137855);
  }

  62% {
    opacity: 0.9;
    transform: scale(3.683852625310354);
  }

  100% {
    opacity: 0;
    transform: scale(3.5167078773270264);
  }
}

@keyframes bt2547 {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.6);
  }

  100% {
    transform: scale(1);
  }
}
</style>
